function TradeListTable(container, option) {
    this.table = container.find('.trade-table');
    this.searchBtn = container.find('.search-btn');
    this.tradeNoInput = container.find('.trade-no-input');
    this.dialog = container.find('.dialog');
    this.option = option;
    this._init();
}

TradeListTable.prototype = {
    _init: function () {
        var _this = this;
        this.searchBtn.click(function () {
            var tradeNo = _this.tradeNoInput.val().trim();
            if (tradeNo) {
                _this.onSearch(tradeNo);
            }
        });
        this.initDialog();
    },
    initDialog: function () {
        this.dialog.dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            buttons: [
                {
                    text: "Ok",
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });
    },
    load: function () {
        var _this = this;
        this.table.jqGrid(
            {
                url: _this.option.url,//组件创建完成之后请求数据的url
                datatype: "json",//请求数据返回的类型。可选json,xml,txt
                colNames: ['订单ID', '订单号', '金额', '订单名称', '订单内容', '创建时间', '关闭时间', '状态', '支付方式', '交易详情', '产品名称', '产品ID', '用户名', '用户ID'],//jqGrid的列显示名字
                colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
                    {name: 'id', index: 'id', width: 150},
                    {name: 'tradeNo', index: 'tradeNo', width: 150},
                    {name: 'amount', index: 'amount', width: 50},
                    {name: 'name', index: 'name', width: 100, align: "right"},
                    {name: 'description', index: 'description', width: 150, align: "right"},
                    {name: 'createTime', index: 'createTime', width: 150, align: "right"},
                    {name: 'closeTime', index: 'closeTime', width: 150, sortable: false},
                    {
                        name: 'status', index: 'status', width: 50, sortable: false, formatter: function (v) {
                            var res = '';
                            switch (v) {
                                case 1:
                                    res = '创建';
                                    break;
                                case 2:
                                    res = '已关闭';
                                    break;
                                case 3:
                                    res = '已支付';
                                    break;
                                default:
                                    res = '未知';
                            }
                            return res;
                        }
                    },
                    {name: 'payBy', index: 'payBy', width: 50, sortable: false},
                    {
                        name: 'detail',
                        index: 'detail',
                        width: 80,
                        sortable: false,
                        formatter: function (v, options, row) {
                            return '<button data-id="' + row.id +
                                '" class="ui-button ui-corner-all ui-widget trade-list-table-detail-btn">查看详情</button>';
                        }
                    },

                    {name: 'productName', index: 'productName', width: 150, sortable: false},
                    {name: 'productId', index: 'productId', width: 30, sortable: false},
                    {name: 'username', index: 'username', width: 150, sortable: false},
                    {name: 'userId', index: 'userId', width: 30, sortable: false}
                ],
                rowNum: 10,//一页显示多少条
                rowList: [10, 20, 30],//可供用户选择一页显示多少条
                pager: '#trade-list-table-pager',//表格页脚的占位符(一般是div)的id
                sortname: 'id',//初始化的时候排序的字段
                sortorder: "desc",//排序方式,可选desc,asc
                mtype: "get",//向后台请求数据的ajax的类型。可选post,get
                viewrecords: true,
                gridComplete: function () {
                    _this.registerDetailBtnListeners();
                }
            });
    },
    hidePagerBarOption: function () {
        this.table.jqGrid('navGrid', '#trade-list-table-pager', {edit: false, add: false, del: false, search: false});
    },
    onSearch: function (tradeNo) {
        this.table.setGridParam({
            postData: {
                tradeNo: tradeNo
            }
        });
        this.table.trigger('reloadGrid');
    },
    registerDetailBtnListeners: function () {
        var _this = this;
        $(".trade-list-table-detail-btn").click(function () {
            _this.detail($(this).attr('data-id'));
        });
    },
    detail: function (id) {
        var _this = this;
        var content = this.dialog.find('.content').empty();
        $.get('/trade/' + id + '/_status', function (res) {
            if (res.code === 0) {
                _this.appendStatusInfo2Content(res.data, content);
            } else {
                content.text(res.msg);
            }
        }, 'json');
        this.dialog.dialog('open');
    },
    appendStatusInfo2Content: function (info, content) {
        var mp = this.option.statusMp;
        for (var k in info) {
            var name = mp[k] ? mp[k] : k;
            var value = info[k];
            var p = $('<p><label>' + name + ':\t</label><span>' + value + '</span></p>');
            p.appendTo(content);
        }
    }
};


$(function () {
    pageInit();
});

function pageInit() {
    var table = $("#trade-list-table-wrap");
    var tradeListTable = new TradeListTable(table, {
        url: '/trade/list', statusMp: {
            payBy: '支付方式',
            msg: '信息',
            buyerLogon: '买家信息',
            outTrade: '商家交易号',
            totalAmount: '支付金额',
            tradeNo: '支付宝交易号',
            tradeStatus: '交易状态',
            productId: '产品ID',
            productName: '产品名称',
            username: '交易用户名',
            userId: '交易用户ID'
        }
    });
    tradeListTable.load();
    tradeListTable.hidePagerBarOption();
}